<!-- 上传文件弹窗 -->
<template>
  <el-dialog
    width="400px"
    :title="title"
    :visible="visible"
    :lock-scroll="false"
    :destroy-on-close="true"
    @update:visible="updateVisible" v-dialogDrag append-to-body
  >
    <el-upload
      drag
      action
      class="ele-block"
      v-loading="loading"
      :accept="accept"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        <em>点击选择文件</em>
      </div>
      <div class="el-upload__tip ele-text-center" slot="tip">
        <span>仅允许导入{{ accept }}文件。</span>
        <el-link
          @click="handleImportTemplate"
          download
          type="primary"
          :underline="false"
          style="vertical-align: baseline;"
        >下载模板</el-link>
      </div>
    </el-upload>
  </el-dialog>
</template>

<script>
  export default {
    name: 'UploadFile',
    props: {
      // 是否打开弹窗
      visible: Boolean,
      fetchFun: Function, //导入请求接口
      importTemplate: Function, //下载模板请求接口
      params: { type: Object, default: () => { } }, //其他额外参数
      templateTitle: String, //模板名称
      // 弹框标题
      title: {
        type: String,
        default() {
          return '导入';
        },
      },
      // 下载模板地址
      templateUrl: {
        type: String,
        default() {
          return '';
        },
      },
      // 上传文件类型
      accept: {
        type: String,
        default() {
          return '.xls,.xlsx';
        },
      }
    },
    data() {
      return {
        // 导入请求状态
        loading: false,
        // 导入模板下载地址
        url: this.templateUrl
      };
    },
    methods: {
      /* 上传 */
      beforeUpload(file) {
        this.loading = true;
        let formData = new FormData();
        formData.append('file', file);
        let reqData = Object.assign({}, this.params, formData)
        this.fetchFun(formData).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.$message({ type: 'success', message: '导入成功' });
            this.updateVisible(false);
            this.$emit('done');
          } 
        }).catch(e => {
          this.loading = false;
        });
        return false;
      },
      /** 下载模板操作 */
      handleImportTemplate() {
        this.importTemplate().then(response => {

          this.$download.excel(response, this.templateTitle + '.xls');
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      // 文件流转excel
      fileChangeExcel(res, name) {
        //1.我们需要通过blob对象来处理，需要模拟一个<a>标签来提供下载链接
        const elink = document.createElement('a');
        elink.style.display = 'none';
        //2.blob是二进制大对象，接受后台返回的数据流，导出数据
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        //3.创建一个url 对象，并将blob实例作为参数传入，这样href的值就是以blob开头的一个文件流下载链接,类似于href="blob:http://127.0.0.1xxxxx"
        const blobUrl = URL.createObjectURL(blob);
        elink.href = blobUrl;
        elink.download = name;//下载后的文件名
        //4.将a标签加入body,并手动点击触发下载
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      },
    }
  }
</script>

<style scoped>
.ele-block ::v-deep .el-upload,
.ele-block ::v-deep .el-upload-dragger {
  width: 100%;
}
</style>
